<template>
	<view>
		<u-navbar title="计算机组成原理" placeholder :bgColor="bgColor" :border="false" autoBack></u-navbar>
		<view class="icon-btns">
			<view class="mr-20">
				<u-icon name="search" size="24"></u-icon>
			</view>
			<view class="" style="transform: rotate(90deg);">
				<u-icon name="more-dot-fill" size="18"></u-icon>
			</view>
		</view>
		<view class="select-wrap">
			<view class="title">题型选择(可多选)</view>
			<view class="options">
				<view class="op-item" @click="itemClick(item.id)" v-for="item in options" :key="item.id"
					:class="{active:item.selected===1}">
					<view class="circle" :style="{backgroundColor:item.color}"></view>
					<view class="op-name">{{item.name}}</view>
				</view>
			</view>


		</view>
		<view class="fixed">
			<view class="switch">
				<u-switch v-model="value" activeColor="#F16C40"></u-switch>
				<view class="ml-15">随机</view>
			</view>
			<view class="start" @click="goDoExercises">开始</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

				bgColor: "transparent",
				options: [{
						id: 1,
						name: '机组易错题组',
						color: '#8ed89e',
						// color: this.getRandomHexColor(),
						selected: 0
					},
					{
						id: 2,
						name: '选择题常考点汇总',
						color: '#f9dc8c',
						// color: this.getRandomHexColor(),
						selected: 1
					},
					{
						id: 3,
						name: '2024考研真题判断题',
						color: '#f4aeae',
						// color: this.getRandomHexColor(),
						selected: 0
					},
					{
						id: 4,
						name: '总结笔记',
						color: '#9bd2ff',
						// color: this.getRandomHexColor(),
						selected: 0
					}
				],
				value: false
			};
		},
		methods: {
			getRandomHexColor() {
				const hex = Math.floor(Math.random() * 16777216).toString(16)
				return `#${hex.padStart(6, '0')}`
			},
			itemClick(id) {
				// const ops = uni.$u.deepClone(this.options);
				this.options.forEach(item => {
					if (item.id == id) {
						item.selected = item.selected == 1 ? 0 : 1
					}

				})
				// console.log(ops);
				// this.options = ops

			},
			goDoExercises() {
				uni.navigateTo({
					url: './doExercises'
				})
			}
		}
	}
</script>
<style>

</style>
<style lang="scss">
	.icon-btns {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		padding: 20rpx;
		box-sizing: border-box;

		view {
			width: 21px;
			height: 21px;
		}
	}

	.select-wrap {
		padding: 60rpx;
		font-size: 30rpx;
		color: #3d3d3d;
		padding-top: 0;


		.title {
			font-weight: 500;
			margin-bottom: 36rpx;
			margin-left: 50rpx;
		}

		.options {
			width: 100%;

			.op-item {
				width: 100%;
				height: 87px;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				padding: 26rpx;
				margin-bottom: 26rpx;
				background: #F6F4F3;
				border-radius: 45px;
				transition: all .3s;
				font-size: 30rpx;
				color: #3d3d3d;

				.circle {
					width: 62px;
					height: 62px;
					border-radius: 50%;
					margin-right: 46rpx;
				}

				.op-name {
					flex: 1;
					font-weight: 600;
				}
			}

			.op-item.active {
				border: 2rpx solid #F16C40;
				box-shadow: 0px 0px 10rpx 0px rgba(241, 108, 64, 0.6);
			}
		}
	}

	.fixed {

		padding: 0 110rpx 40rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		box-sizing: border-box;
		z-index: 9;
		background-color: #fff;

		.switch {
			font-size: 24rpx;
			font-weight: 500;
			color: #3d3d3d;

			display: flex;
			align-items: center;
			justify-content: center;
		}

		.start {
			opacity: 1;
			font-size: 44rpx;
			font-weight: 600;
			line-height: 33px;
			letter-spacing: 0.04em;
			font-variation-settings: "opsz" auto;
			font-feature-settings: "kern" on;
			color: #000000;

			text-shadow: 0px 7px 10px rgba(153, 153, 153, 0.7);
		}
	}
</style>